<template>
	<view class="content">
		<view class="live-list">
			<view class="live-item" v-for="(item, index) in liveList" :key="index" @click="openLive(item)">
				<view class="image-wrap">
					<image class="image" :src="item | getCoverImage" mode="aspectFill"></image>
					<view class="live-data">
						<view class="location">
							<image class="icon" src="../../static/location_icon_white.png" mode="aspectFill"></image>
							<text>{{item.description}}</text>
						</view>
						<view class="people">
							<image class="icon" src="../../static/hot_icon_white.png" mode="aspectFill"></image>
							<text>{{item.size}}</text>
						</view>
					</view>
					<view class="game-name">
						<text>{{item.game.name}}</text>
					</view>
				</view>
				<view class="live-info">
					<text class="title">{{item.name}}</text>
					<text class="desc">{{item.member.name}}</text>
				</view>
			</view>
		</view>
		<view v-if="empty" class="empty-wrap">
			<image class="empty-icon" src="../../static/empty.png" mode=""></image>
			<text class="empty-text">暂无数据</text>
		</view>
		<uni-load-more :status="status" :content-text="contentText"></uni-load-more>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	export default {
		components: {
			uniPopup,
			uniLoadMore
		},
		data() {
			return {
				myInfo: {},
				key: '',
				empty: false,
				liveList: [],
				page: 1,
				status: 'more',
				contentText: {
					contentdown: '加载更多',
					contentrefresh: '加载中',
					contentnomore: '木有了~'
				},
				id: '',
				lid: '',
				password: '',
				live_vm_min: '',
				live_vm_max: '',
			}
		},
		onLoad() {
			try {
				const configInfo = uni.getStorageSync('configInfo');
				if (configInfo) {
					this.live_vm_min = configInfo.live_vm_min
					this.live_vm_max = configInfo.live_vm_max
				}
			} catch (e) {
				console.log(e)
			}
			try {
				const myInfo = uni.getStorageSync('myInfo');
				if (myInfo) {
					this.myInfo = myInfo;
				}
			} catch (e) {
				console.error(e)
			}
		},
		onUnload() {
			
		},
		onReady() {
			
		},
		onReachBottom() {
			this.status = 'loading';
			this.getLive();
		},
		onNavigationBarSearchInputChanged(e) {
			this.key = e.text;
		},
		onNavigationBarSearchInputConfirmed(e) {
			this.key = e.text;
			if (this.key) {
				this.page = 1;
				this.getSearch();
			}
		},
		methods: {
			getSearch() {
				uni.showLoading({
					title: ''
				})
				this.$api.api.ajaxData({
					method: 'V1.Search',
					uid: this.myInfo.id,
					token: this.myInfo.token,
					Keyword: this.key,
					page: this.page
				}, res => {
					uni.hideLoading()
					if (res.status) {
						if (this.page == 1) {
							this.liveList = res.data
							this.page++
							this.status = 'more'
							if (this.liveList.length == 0) {
								this.empty = true
							} else {
								this.empty = false
							}
						} else {
							if (res.data.length > 0) {
								for (let i = 0; i < res.data.length; i++) {
									this.liveList.push(res.data[i])
								}
								this.page++
								this.status = 'more'
							} else {
								this.status = 'noMore'
							}
						}
					}
				}, err => {
					uni.hideLoading()
					uni.showToast({
						title: '网络错误，请稍后再试',
						position: 'bottom',
						icon: 'none'
					})
				})
			},
			passwordChange(e) {
				console.log('showPassword 是否打开: ' + e.show)
			},
			enterPassword() {
				if (this.password == '') {
					uni.showToast({
						title: '请输入密码',
						position: 'center',
						icon: 'none'
					})
					return false;
				}
				this.goLiveJoin(this.id, this.lid, this.password);
				this.$refs['showPassword'].close();
			},
			goLiveJoin(id, lid, password) {
				let game_room_id = ''
				if (lid != '0') {
					game_room_id = lid
				}
				uni.showLoading({
					title: ''
				})
				this.$api.api.ajaxData({
					method: 'V1.LiveJoin',
					uid: this.myInfo.id,
					token: this.myInfo.token,
					id: id,
					p: password,
				}, res => {
					if (res.status) {
						getApp().globalData.live_list = res.data.list;
						let num = this.$api.api.getRandom(parseInt(this.live_vm_min), parseInt(this.live_vm_max))
						let size = res.data.live.size;
						if (parseInt(size) < res.data.list.length) {
							size = res.data.list.length
						}
						let games = [];
						for (let i = 0; i < res.data.games.length; i++) {
							let gameOptions = []
							if (res.data.games[i].id == 1) {
								gameOptions = [{
									name: '闲',
									value: 1,
									odds: res.data.games[i].min_odds
								}, {
									name: '和',
									value: 10,
									odds: res.data.games[i].middle_odds
								}, {
									name: '庄',
									value: 100,
									odds: res.data.games[i].max_odds
								}]
							}
							if (res.data.games[i].id == 2) {
								gameOptions = [{
									name: '虎',
									value: 1,
									odds: res.data.games[i].min_odds
								}, {
									name: '和',
									value: 10,
									odds: res.data.games[i].middle_odds
								}, {
									name: '龙',
									value: 100,
									odds: res.data.games[i].max_odds
								}]
							}
							if (res.data.games[i].id == 3) {
								gameOptions = [{
									name: '小',
									value: 1,
									odds: res.data.games[i].min_odds
								}, {
									name: '豹子',
									value: 10,
									odds: res.data.games[i].middle_odds
								}, {
									name: '大',
									value: 100,
									odds: res.data.games[i].max_odds
								}]
							}
							games.push({
								id: res.data.games[i].id,
								icon: res.data.games[i].icon,
								name: res.data.games[i].name,
								max_odds: res.data.games[i].max_odds,
								min_odds: res.data.games[i].min_odds,
								middle_odds: res.data.games[i].middle_odds,
								countdown: res.data.games[i].countdown,
								gameOptions: gameOptions
							})
						}
						let gameInfo = null;
						if (!!res.data.d) {
							gameInfo = {
								sn: res.data.d.sn,
								start: res.data.d.start,
								uid: res.data.d.uid,
								gid: res.data.d.gid,
								lid: res.data.d.lid,
								status: res.data.d.status,
							}
						}
						let live = {
							id: res.data.live.id,
							lid: game_room_id,
							name: res.data.live.name,
							city: res.data.live.description,
							status: res.data.live.status,
							money: res.data.live.money,
							type: res.data.live.type,
							anchor_id: res.data.live.member.id,
							anchor_name: res.data.live.member.name,
							anchor_avatar: res.data.live.member.avatar,
							admin_id: res.data.live.admin_id,
							max_v: res.data.live.max_v,
							min_v: res.data.live.min_v,
							games: games,
							gameInfo: [gameInfo],
							live_show: res.data.other.live_show,
							live_download_notice: JSON.parse(res.data.other.live_download_notice),
							live_notice: res.data.other.live_notice,
							live_sys_notice: res.data.other.live_sys_notice,
							share_code: res.data.other.share_code,
							is_like: res.data.is_like,
							stream: res.data.play,
							role: 'audience',
							size: size,
							num: num,
						}
						this.$tim.joinGroup({
							groupID: this.IDBEFORE + live.id,
							type: this.TIM.TYPES.GRP_AVCHATROOM,
						}).then(imResponse => {
							console.log('------>加群',imResponse)
							let message = this.$tim.createCustomMessage({
								to: this.IDBEFORE + live.id + '',
								conversationType: this.TIM.TYPES.CONV_GROUP,
								payload: {
									data: 'live-system-message-join',
									description: this.myInfo.name + '等'+num+'人进入直播间',
									extension: JSON.stringify({
										fromId: this.myInfo.id,
										fromName: this.myInfo.name,
										fromAvatar: this.myInfo.avatar,
										num: num
									}),
								}
							});
							this.$tim.sendMessage(message).then(imResponse => {
								console.log('直播间系统消息发送成功', imResponse);
							}).catch(imError => {
								console.warn('直播间系统消息发送失败', imError);
							});
						}).catch(imError => {
							console.warn('joinGroup error:', imError);
						});
						if (!!game_room_id) {
							this.$tim.joinGroup({
								groupID: this.IDBEFORE + game_room_id,
								type: this.TIM.TYPES.GRP_AVCHATROOM,
							}).then(imResponse => {
								console.log('------>加群',imResponse)
							}).catch(imError => {
								console.warn('------>加群失败', imError);
							});
						}
						uni.navigateTo({
							url: '../live/live_room?live=' + encodeURIComponent(JSON.stringify(live))
						})
					} else {
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						})
					}
				}, err => {
					uni.hideLoading()
					uni.showToast({
						title: '网络错误，请稍后再试',
						position: 'bottom',
						icon: 'none'
					})
				})
			},
			openLive(item) {
				if (item.password) {
					// 密码房间
					this.id = item.id
					this.lid = item.lid
					this.$refs['showPassword'].open();
				} else if (parseFloat(item.number_money) > 0) {
					// 收费房间
					uni.showModal({
						title: '提示',
						content: '本场直播￥'+item.number_money+'，确认支付？',
						success: res => {
							if (res.confirm) {
								this.goLiveJoin(item.id, item.lid, '');
							}
						}
					});
				} else {
					this.goLiveJoin(item.id, item.lid, '');
				}
			},
		},
		filters: {
			getCoverImage(item) {
				if (item && item.type == 1) {
					return item.game.icon
				}
				if (item && item.type == 0) {
					return item.icon
				}
				return ''
			}
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	.live-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		padding: 10rpx;
		.live-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 50%;
			padding: 10rpx;
			box-sizing: border-box;
			.image-wrap {
				position: relative;
				.image {
					display: block;
					width: 345rpx;
					height: 345rpx;
					border: 1rpx solid #efefef;
					border-radius: 10rpx;
				}
				.live-data {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 60rpx;
					padding: 0 20rpx;
					background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.6));
					border-radius: 0 0 10rpx 10rpx;
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					.icon {
						width: 24rpx;
						height: 24rpx;
						margin-right: 5rpx;
					}
					.location {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						text {
							font-size: 16rpx;
							color: #FFFFFF;
						}
					}
					.people {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						text {
							font-size: 16rpx;
							color: #FFFFFF;
						}
					}
				}
				.game-name {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 40rpx;
					padding: 0 20rpx;
					background-color: $main-color;
					border-radius: 10rpx;
					position: absolute;
					left: 10rpx;
					top: 10rpx;
					text {
						font-size: 18rpx;
						color: #FFFFFF;
					}
				}
			}
			.live-info {
				display: flex;
				flex-direction: column;
				width: 100%;
				padding: 0 10rpx;
				margin-top: 10rpx;
				box-sizing: border-box;
				.title {
					font-size: 30rpx;
					color: $title-color;
				}
				.desc {
					font-size: 24rpx;
					color: $text-color;
				}
			}
		}
	}
</style>
